.navbar{background: rgba(0,0,0,0.2); height: 100px; z-index: 9; position: fixed; top: 0; left: 0; width: 100%; transition: all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s}
.navbar .logo{padding-left: 50px; width: 310px; text-align: center; background: url(../images/tag1.png) no-repeat left center; height: 100px; transition: all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s}
.navbar .logo h3{font-size:24px; color: #fff; margin-top: 30px; letter-spacing: 2px; transition: all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s}
.navbar .logo p{font-size: 13px; color: #fff; margin-top: 5px; letter-spacing: -1px;}
.navbar .top-tel{width: 270px; box-sizing: border-box; padding-top: 25px; padding-left: 50px; background: url(../images/tag2.png) no-repeat left center; height: 100px; transition: all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s}
.navbar .top-tel h4{color: #fff; font-size: 18px; text-align: center; margin-top: 5px; transition: all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s}
.navbar .top-case{width: 570px; text-align: center; color: #fff;}
.navbar .top-case h4{font-size: 16px; margin-top: 26px; transition: all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s}
.navbar .top-case h3{font-size: 18px; margin-top: 8px; transition: all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s}
.navbar .top-case h3 span{position: relative;}
.navbar .top-case h3 span:before{position: absolute; height: 1px; width: 40px; background: #fff; left: -50px; top: 11px; display: block; content: "";}
.navbar .top-case h3 span:after{position: absolute; height: 1px; width: 40px; background: #fff; right: -50px; top: 11px; display: block; content: "";}
.navbar.active{height: 75px; background: #000;}
.navbar.active .logo{height: 75px;}
.navbar.active .logo h3{font-size: 20px; margin-top: 20px;}
.navbar.active .top-case h4{font-size: 16px; margin-top: 17px;}
.navbar.active .top-case h3{font-size: 16px;}
.navbar.active .top-tel{height: 75px; padding-top: 16px;}
.navbar.active .top-tel h4{font-size: 16px;}
.notice{background: #012657; height: 80px; width: 100%; box-shadow: 4px 4px 6px rgba(0,23,52,0.3);}
.notice i{display: block; float: left; width: 80px; height: 80px; background: url(../images/notice1.png) no-repeat center;}
.notice .textScroll-top{float: left; width: 1040px; height: 40px; background: #103361; margin-top: 20px; position: relative;}
.notice .textScroll-top .bd{width: 100%; padding: 0 20px; height: 40px; box-sizing: border-box; overflow: hidden;}
.notice .textScroll-top .hd{position: absolute; right: -60px; top: 9px;}
.notice .textScroll-top .bd ul li{color: #fff; line-height: 40px; cursor: pointer; height: 40px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px;}
.notice .textScroll-top .hd a{display: block; width: 14px; height: 9px; cursor: pointer;}
.notice .textScroll-top .hd a.prev{background: url(../images/btn01.png) no-repeat center; margin-bottom: 5px;}
.notice .textScroll-top .hd a.next{background: url(../images/btn02.png) no-repeat center;}
.banner{position: relative; overflow: hidden;}
.banner1,.banner2,.banner3{position: absolute; overflow: hidden; width: 100%; height: 100%;}
.banner1{background: url(../images/banner1.jpg) no-repeat center; background-size: cover; left: 0; z-index: 3; top: 0;}
.banner2{background: url(../images/banner2.jpg) no-repeat center; background-size: cover; left: 0; z-index: 2; top: 0; }
.banner3{background: url(../images/banner3.jpg) no-repeat center; background-size: cover; left: 0; z-index: 1; top: 0; }
.banner1 .bg-grey,.banner2 .bg-grey,.banner3 .bg-grey{background: rgba(0,0,0,0.3); position: absolute; top: 33%; left: 0; width: 100%; padding: 2% 0;}
.banner1 .w1200,.banner2 .w1200,.banner3 .w1200{text-align: center;}
.banner1 .line,.banner2 .line,.banner3 .line{width: 164px; height: 1px; background: #fff; margin: 40px auto;}
.banner .ul{position: absolute; left: 20px; top: 50%; z-index: 4; margin-top: 0;}
.banner .ul span{color: #fff; cursor: pointer; position: relative; display: block; border: 1px solid rgba(255,255,255,0.6); width: 12px; height: 12px; border-radius: 50%; margin-bottom: 10px; box-shadow: 0 0 5px #aaa;}
.banner .ul span.on:before{position: absolute; display: block; width: 8px; height: 8px; background: #fff; content: ""; left: 2px; top: 2px; border-radius: 50%;}
.banner .down{position: absolute; bottom: 30px; z-index: 99; width: 28px; height: 60px; left: 50%; margin-left: -14px; animation: downmove 1s ease-in-out infinite;}
.step-title{padding: 80px 0 70px;}
.step-title ul{margin-left: 170px;}
.step-title ul li{width: 230px; height: 40px; cursor: pointer; float: left; display: block; position: relative;}
.step-title ul li:before{position: absolute; display: block; content: ""; width: 36px; height: 19px; right: 15px; top: 10px; background: url(../images/right1.png) no-repeat;}
.step-title ul li:nth-last-child(1):before{display: none;}
.step-title ul li a{display: block; width: 161px; height: 40px; overflow: hidden; position: relative; background: url(../images/step01.png) no-repeat; text-align: center; line-height: 40px; font-size: 14px; color: #012657; box-sizing: border-box; padding-right: 12px; transition: all 1s; -webkit-transition:all 1s; -moz-transition:all 1s; -o-transition:all 1s}
.step-title ul li a:before{position: absolute; width: 200px; height: 150px; transform: rotate(20deg); -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); display: block; background: #103361; content: ""; z-index: -1; left: -300px; top: -60px; transition: all 1s; -webkit-transition:all 1s; -moz-transition:all 1s; -o-transition:all 1s}
.step-title ul li.on a{background: url(../images/step01_on.png) no-repeat !important; color: #fff;}
.step-title ul li:hover a{color: #fff;}
.step-title ul li:hover a:before{left: 0;}
.step-content .title{padding-bottom: 80px;}
.title h3{font-size: 30px; color: #474747; text-align: center;}
.title h3 span,.step-content .title h3 big{position: relative;}
.title h3 span:before{width: 200px; height: 1px; background: #808080; position: absolute; content: ""; display: block; left: -240px; top: 30px;}
.title h3 span:after{width: 200px; height: 1px; background: #808080; position: absolute; content: ""; display: block; right: -240px; top: 30px;}
.title h3 big:before{width: 60px; height: 3px; background: #5c5c5c; position: absolute; content: ""; display: block; left: -100px; top: 28px;}
.title h3 big:after{width: 60px; height: 3px; background: #5c5c5c; position: absolute; content: ""; display: block; right: -100px; top: 28px;}
.title p{font-size: 18px; color: #474747; text-align: center; padding-top: 10px; letter-spacing: 1px;}
.difficult .text{width: 490px; cursor: pointer; position: relative; left: -100px; opacity: 0;}
.difficult .text p{font-size: 14px; line-height: 30px; text-indent: 30px; color: #4c4c4c;}
.difficult .text p big{font-size: 20px;}
.difficult .text img{display: block; margin: 45px 0;}
.difficult .text:hover p{text-shadow: 1px 1px 2px #dedede;}
.difficult .square{width: 660px;}
.difficult .square dl{width: 660px; margin-bottom: 40px; position: relative; opacity: 0; right: -100px;}
.difficult .square dl:nth-last-child(1){margin-bottom: 0;}
.difficult .square dl dt{width: 130px; height: 130px;color: #888; font-size: 40px; text-align: center; line-height: 130px; position: relative; float: left; border: 1px solid #33ABFF; border-radius: 50%;}
.difficult .square dl dt i{width: 8px; height: 8px; background: #33abff; border-radius: 50%; display: block; position: absolute;}
.difficult .square dl dt span{display: block; width: 100%; height: 100%;}
/*.difficult .square dl dt span:before{position: absolute; content: "%"; font-size: 30px; color: #999; right: -27px; top: -43px;}*/ 
.difficult .square dl dd{float: right; width: 490px; cursor: pointer; height: 110px; font-size: 14px; color: #4C4C4C; line-height: 30px; padding: 24px 39px; box-shadow: 2px 2px 6px rgba(0,0,0,0.12); box-sizing: border-box; border: 1px solid #33ABFF; border-radius: 20px 0 20px 0; margin-top: 10px;}
.difficult .square dl dd:hover{text-shadow: 1px 1px 2px #dedede;}
.conflict .text{font-size: 14px; line-height: 36px; color: #474747; padding: 0 85px;}
.conflict .charts{margin: 110px auto 0; width: 250px; height: 250px; position: relative;}
.charts1{position: absolute; right: -265px; top: 10px; z-index: 3;}
.charts2{position: absolute; right: -355px; top: 170px; z-index: 3;}
.charts3{position: absolute; right: 180px; top: 115px; z-index: 3;}
.charts4{position: absolute; right: 150px; top: -25px; z-index: 3;}
.compensation .pull-left{width: 552px; height: 513px;}
.compensation .pull-right{width: 520px; padding:20px 40px;}
.compensation .pull-right h4{line-height: 48px; font-size: 20px; color: #474747; margin-bottom: 50px;}
.compensation .pull-right h5{color: #333; font-size: 18px; margin-bottom: 30px; height: 40px; line-height: 40px; cursor: pointer; width: 100%; overflow: hidden;box-sizing: border-box; padding-left: 65px; background: url(../images/arrow_change.png) no-repeat -38px center; transition: all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s}
.compensation .pull-right h5:hover{background: #012758; color: #fff; background: url(../images/arrow_change.png) no-repeat left center #012758;}
.compensation dl{font-size: 14px; line-height: 36px; color: #474747;}
.compensation dl dt{width: 50px; float: left;}
.compensation dl dd{margin-left: 60px;}
.fault h3.tip{font-size: 20px; color: #474747; margin-bottom: 90px; text-align: center;}
.fault .text p{line-height: 54px; color: #474747; font-size: 16px; padding-left: 240px;}
.fault .text p span{display: inline-block; font-size: 18px; font-style: italic; width: 95px;}
.fault .text p em{font-size: 18px; font-style: italic;}
.fault .box{width: 696px; height: 60px; position: relative; background: url(../images/boxbg.png) no-repeat center; margin: 0 auto 90px;}
.fault .box span{display: block; position: absolute;}
.fault .box span:before{ content: ''; position: absolute; top: 0; left: 0; right: 0;}
.fault .box span i{position: absolute; display: block; width: 39px; height: 26px; background: url(../images/stag.png) no-repeat; left: 40%; font-size: 12px; line-height: 23px; color: #fff; text-align: center; top: -45px;}
.fault .box .box-p{position: absolute; width: 597px; height: 20px; left: 50px;}
.fault .box0{top: 17px; left: 0; width: 0;}
.fault .box1{width: 20%; background-color: #86e01e; height: 20px; left: 0; top: 17px; border-radius: 10px 0 0 10px;}
.fault .box1:before {bottom: 0;background: url(../images/stripes.png) 0 0 repeat; border-radius: 4px 4px 0 0;}
.fault .box2{width: 20%; background-color: #f2d31b; height: 20px; left: 20%;top: 17px;}
.fault .box2:before {bottom: 0;background: url(../images/stripes.png) 0 0 repeat; border-radius: 4px 4px 0 0;}
.fault .box3{width: 20%; background-color: #f2b01e; height: 20px; left: 40%;top: 17px;}
.fault .box3:before {bottom: 0;background: url(../images/stripes.png) 0 0 repeat; border-radius: 4px 4px 0 0;}
.fault .box4{width: 30%; background-color: #f27011; height: 20px; left: 60%;top: 17px;}
.fault .box4:before {bottom: 0;background: url(../images/stripes.png) 0 0 repeat; border-radius: 4px 4px 0 0;}
.fault .box5{width: 10%; background-color: #f63a0f; height: 20px; left: 90%;top: 17px; border-radius: 0px 10px 10px 0px;}
.fault .box5:before {bottom: 0;background: url(../images/stripes.png) 0 0 repeat; border-radius: 4px 4px 0 0;}



.gd{width: 100%; height: 600px; cursor: pointer; overflow: hidden; margin: 130px auto; background: url(../images/m_banner.png) no-repeat center; background-size: 100%; position: relative; transition: all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s}
.gd .w1200{position: relative;}
.gd:before{position: absolute; display: block; content: ""; top: 0; left: 0; background: none; width: 100%; height: 100%;transition: all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s}
.gd:hover{background-size: 110%;}
.gd:hover:before{ background: rgba(0,0,0,0.2);}
.gd .w1200 img{position: absolute; right: 20px; top: 180px; z-index: 2; transition: all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s}
.gd:hover img{right: -20px;}
.patterns{height: 563px;}
.patterns .title{padding-bottom: 35px;}
.patterns ul li{float: left; width: 0; opacity: 0;}
.patterns ul li span{border: 1px solid #33ABFF; cursor: pointer; border-radius: 5px; position: relative; display: block; overflow: hidden; width: 114px; height: 114px; margin: 65px auto 40px;  transition: all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s}
.patterns ul li span i{display: block; width: 100%; height: 100%; left: 0; top: 0; position: absolute; border-radius: 5px; background: #33ABFF; transition: all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s}
.patterns ul li p{color: #5f5f5f; font-size: 14px; text-align: center;}
.patterns ul li span:hover{transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);}
.patterns ul li span:hover i{width: 106px; height: 106px; top: 4px; left: 4px; border-radius: 50%;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);}
.cost{height: 800px; margin-top: 85px; overflow: hidden; background: url(../images/bg1.png) no-repeat center; width: 100%;}
.cost .title{margin-top: 115px; padding-bottom: 95px;}
.cost dl{float: left; width: 20%; cursor: pointer; box-sizing: border-box; padding: 20px;}
.cost dl dt{width: 90px; height: 90px; margin: 0 auto 50px; overflow: hidden; display: block; position: relative;}
.cost dl dt .old{top: 0; left: 0; position: absolute; transition: all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s}
.cost dl dt .new{top: 90px; left: 0; position: absolute; transition: all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s}
.cost dl dd{position: relative; bottom: -50px; opacity: 0;}
.cost dl dd h3{text-align: center; font-size: 18px; color: #333333;}
.cost dl dd h5{font-size: 14px; color: #666666; margin-top: 40px; line-height: 25px; text-align: center; position: relative;}
.cost dl dd h5:before{position: absolute; width: 60px; height: 1px; content: ""; background: #3967ac; display: block; bottom: -30px; left: 50%; margin-left: -30px;}
.cost dl dd p{line-height: 25px; color: #999; font-size: 12px; margin-top: 50px;}
.cost dl:hover dt .old{top:-90px;}
.cost dl:hover dt .new{top: 0px;}
.banquan{height: 58px; line-height: 58px; background: #011e45; font-size: 12px; color: #fff;}
.banquan a{color: #fff;}
.footer{height: 320px; overflow: hidden; background: url(../images/light.png) no-repeat center #012657;}
.footer .tip{font-size: 12px; padding: 30px 0; line-height: 25px; color: #fff; border-top: 1px solid rgba(119,119,119,0.3); text-align: center;}
.footer img{display: block; margin: 60px auto 40px;}
.side_btn { position: fixed; right: 0;top: 50%; margin-top: -90px; z-index: 98; transition: 0.5s all; -webkit-transition: 0.5s all;}
.side_btn ul {background: #3d4247;}
.side_btn ul li { width: 50px; height: 50px; cursor: pointer; position: relative;}
.side_btn ul li a { display: block; height: 35px; position: relative; padding-top: 15px;}
.icon-bg { overflow: hidden; background: url(../images/bg_icon.png) no-repeat;}
.side_btn ul li a i { display: block; margin: 0 auto; height: 23px; width: 22px;}
.side_btn ul li.qq i { background-position: -33px 0;}
.side_btn ul li.phone i { background-position: -66px 0;}
.side_btn ul li.wechat i { background-position: -95px 0;}
.side_btn ul li.back_top1 i { background-position: 0px 0;}
.side_btn ul li.wechat span { display: block; position: absolute; transition: 0.5s all; -webkit-transition: 0.5s all; right: 200%; top: 0; background: #52575b; width: 120px; height: 120px; filter: alpha(opacity=0); opacity: 0;}
.side_btn ul li span img { width: 100px; height: 100px; margin: 10px;}
.side_btn ul li.phone span { display: block; position: absolute; transition: 0.5s all; -webkit-transition: 0.5s all; right: 200%; top: 0; background: #52575b; white-space: nowrap; line-height: 40px; color: #fff; padding: 0 10px; filter: alpha(opacity=0); opacity: 0;}
.side_btn ul li a:hover {background: #52575b;}
.side_btn ul li span:before { display: block; content: ""; width: 10px; height: 10px; z-index: 99; background: #52575b; position: absolute; top: 14px; right: -5px; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.side_btn ul li.phone:hover span,.side_btn ul li.wechat:hover span{opacity: 1; filter: alpha(opacity=1); right: 150%;}

/*下滑箭头*/
@keyframes downmove{
	0%{bottom: 50px;}
	50%{bottom: 30px;}
	100%{bottom: 50px;}
}
@-webkit-keyframes downmove{
	0%{bottom: 50px;}
	50%{bottom: 30px;}
	100%{bottom: 50px;}
}
@-moz-keyframes downmove{
	0%{bottom: 50px;}
	50%{bottom: 30px;}
	100%{bottom: 50px;}
}
@-o-keyframes downmove{
	0%{bottom: 50px;}
	50%{bottom: 30px;}
	100%{bottom: 50px;}
}





















